<script setup lang="ts">
import NavBar from '@/components/NavBar/index.vue'
import { navigateBack } from '@/utils/navigation'
import { ref } from 'vue'

// 模拟数据
const accuracy = ref(0.0) // 正确率
const totalWords = ref(295) // 总单词数
const reviewedWords = ref(1) // 已复习单词数
const forgottenWords = ref(1) // 遗忘单词数
const unrenewedWords = ref(294) // 未复习单词数
const forgottenWord = ref('worry') // 遗忘单词
const forgottenWordTranslation = ref('担心') // 遗忘单词翻译
</script>

<template>
  <view class="review-report">
    <NavBar title="复习报告" @left-click="navigateBack" />

    <view class="accuracy-container">
      <view class="accuracy-circle">
        <text class="accuracy-text">
          {{ accuracy }}%
        </text>
        <text class="accuracy-label">
          正确率
        </text>
      </view>
    </view>

    <view class="stats-container">
      <text class="stats-title">
        本场作业完成情况统计
      </text>
      <view class="stats-grid">
        <view class="stats-item">
          <text class="stats-number">
            {{ totalWords }}
          </text>
          <text class="stats-label">
            需复习
          </text>
        </view>
        <view class="stats-item">
          <text class="stats-number">
            {{ reviewedWords }}
          </text>
          <text class="stats-label">
            已复习
          </text>
        </view>
        <view class="stats-item">
          <text class="stats-number">
            {{ forgottenWords }}
          </text>
          <text class="stats-label">
            遗忘数
          </text>
        </view>
        <view class="stats-item">
          <text class="stats-number">
            {{ unrenewedWords }}
          </text>
          <text class="stats-label">
            未复习
          </text>
        </view>
      </view>
    </view>

    <view class="forgotten-container">
      <text class="forgotten-title">
        本次遗忘记录
      </text>
      <view class="forgotten-item">
        <text class="forgotten-word">
          • {{ forgottenWord }}
        </text>
        <text class="forgotten-translation">
          {{ forgottenWordTranslation }}
        </text>
      </view>
    </view>

    <view class="footer">
      <button class="footer-button history-button">
        往期复习
      </button>
      <button class="footer-button back-button" @click="leftClick">
        返回
      </button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.review-report {
  background-color: #f8f8f8;
  min-height: 100vh;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  .accuracy-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60rpx 40rpx;

    .accuracy-circle {
      width: 240rpx;
      height: 240rpx;
      border-radius: 50%;
      background: linear-gradient(135deg, #64b5f6, #42a5f5);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #fff;
      box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.15);

      .accuracy-text {
        font-size: 40rpx;
        font-weight: 500;
        margin-bottom: 4rpx;
      }

      .accuracy-label {
        font-size: 28rpx;
        color: #e0e0e0;
      }
    }
  }

  .stats-container {
    padding: 30rpx 40rpx;

    .stats-title {
      font-size: 34rpx;
      font-weight: 500;
      color: #333;
      margin-bottom: 24rpx;
    }

    .stats-grid {
      display: flex;
      justify-content: space-around;

      .stats-item {
        display: flex;
        flex-direction: column;
        align-items: center;

        .stats-number {
          font-size: 32rpx;
          font-weight: 500;
          color: #2196f3;
          margin-bottom: 4rpx;
        }

        .stats-label {
          font-size: 26rpx;
          color: #757575;
        }
      }
    }
  }

  .forgotten-container {
    padding: 30rpx 40rpx;

    .forgotten-title {
      font-size: 34rpx;
      font-weight: 500;
      color: #333;
      margin-bottom: 24rpx;
    }

    .forgotten-item {
      background-color: #fff;
      padding: 30rpx;
      border-radius: 12rpx;
      box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;

      .forgotten-word {
        font-size: 30rpx;
        font-weight: 400;
        color: #333;
      }

      .forgotten-translation {
        font-size: 30rpx;
        color: #757575;
      }
    }
  }

  .footer {
    padding: 60rpx 40rpx;
    display: flex;
    justify-content: space-around;

    .footer-button {
      width: 42%;
      padding: 24rpx;
      border-radius: 40rpx;
      font-size: 32rpx;
      font-weight: 500;
      box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);

      &.history-button {
        background: linear-gradient(135deg, #ffb300, #ffa000);
        color: #fff;
      }

      &.back-button {
        background-color: #e0e0e0;
        color: #555;
      }
    }
  }
}
</style>
